<template>
	<view class="kuhu-detail-view" v-if="info.order_type">
		<view class="kuhu-detail-content">
			<template v-if="info.order_type ==1 && info.file_assets.length>0">
				<view style="padding-top: 32rpx;">对话截图</view>
				<view class="fx-center">
					<image :src="img.url" mode="aspectFill" class="detail-img" v-for="(img,index) in info.file_assets"
						:key="img.id" @click="$api.toPreviewImg(img.url)"></image>
				</view>

			</template>
			<template v-if="info.order_type ==4 && info.file_assets.length>0">
				<view style="padding-top: 32rpx;">交易截图</view>
				<view class="fx-center">
					<image :src="img.url" mode="aspectFill" class="detail-img" v-for="(img,index) in info.file_assets"
						:key="img.id" @click="$api.toPreviewImg(img.url)"></image>
				</view>
			</template>
			<view class="fx-center-between detail-item" v-if="info.order_type !=2">
				<view class="">姓名</view>
				<view class="content-text">{{info.payload.name}}</view>
			</view>
			<view class="fx-center-between detail-item" v-if="info.order_type !=2">
				<view class="">电话</view>
				<view class="content-text">{{info.payload.phone}}</view>
			</view>
			<view class="fx-center-between detail-item" v-if="info.order_type ==4">
				<view class="">项目</view>
				<view class="content-text">{{info.project.name}}</view>
			</view>

			<view class="fx-center-between detail-item">
				<view class="">客户类型</view>
				<view class="content-text">{{info.order_typename}}</view>
			</view>
			<template v-if="info.order_type ==1">
				<view class="fx-center-between detail-item">
					<view class="">平台名称</view>
					<view class="content-text">{{info.payload.pl_source}}</view>
				</view>
				<view class="fx-center-between detail-item">
					<view class="">平台账号</view>
					<view class="content-text">{{info.payload.pl_account}}</view>
				</view>
			</template>
			<template v-if="info.order_type ==2">
				<view class="fx-center-between detail-item">
					<view class="">平台名称</view>
					<view class="content-text">{{info.payload.pl_name}}</view>
				</view>
				<view class="fx-center-between detail-item">
					<view class="">平台账号</view>
					<view class="content-text">{{info.payload.pl_account}}</view>
				</view>
			</template>

			<view class="fx-center-between detail-item" v-if="info.order_type ==4">
				<view class="">微信号</view>
				<view class="content-text">{{info.payload.wechat}}</view>
			</view>
			<view class="fx-center-between detail-item" v-if="info.order_type ==4">
				<view class="">成交金额</view>
				<view class="content-text">{{info.payload.price}}</view>
			</view>
			<view class="fx-center-between detail-item">
				<view class="">佣金收入</view>
				<view class="content-text">{{info.earn}}｜元</view>
			</view>
			<view class="fx-center-between detail-item">
				<view class="">录入时间</view>
				<view class="content-text">{{info.create_time}}</view>
			</view>
			<view class="fx-center-between detail-item">
				<view class="">验收状态</view>
				<view class="content-text">{{info.state_name}}</view>
			</view>
		</view>
		<view class="dissent-tip">
			对客户验收状态存在异议请与项目业务经理联系，双方无法达成一致请向平台 <text @click="toDissent">提交异议</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: null,
				info: {}
			};
		},
		onLoad(e) {
			if (e.no) {
				this.no = e.no
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				this.$api
					.requst('/gwc/orders/' + this.no, {
						no: this.no,
					}, )
					.then((res) => {
						//order_type 1-客资，2-任务反馈，4-成交订单
						this.info = res.data
					})
			},
			toDissent() {
				uni.navigateTo({
					url: '/pages/workbench/myKehu/dissent/dissent?no=' + this.no
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.kuhu-detail-view {
		padding: 36rpx 24rpx 50rpx;

		.kuhu-detail-content {
			background-color: #fff;
			border-radius: 4rpx;
			padding: 0 32rpx 32rpx;
			font-size: 30rpx;

			.detail-img {
				width: 194rpx;
				height: 194rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 32rpx;
				margin-right: 32rpx;
			}

			.detail-item {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #E2E2E2;

				.content-text {
					color: #5C5F66;
				}
			}
		}

		.dissent-tip {
			font-size: 30rpx;
			color: #8A8F99;
			margin-top: 38rpx;

			text {
				color: #5C5F66;
				margin-left: 8rpx;
			}
		}
	}
</style>